import React, { useEffect, useState } from 'react';
import h from '@/pages/Home/home.module.scss'
import { CloseOutline, AppstoreOutline, LikeOutline, HeartOutline, StarOutline, SmileOutline } from 'antd-mobile-icons'
import { Space, SearchBar, Tabs, Popup } from 'antd-mobile';
import { useSelector } from 'react-redux';
import { getArticleAPI } from '../../apis/home';
import { useNavigate } from 'react-router-dom';


function Home(props) {
    const { userInfo, isLogin } = useSelector(state => state.user)
    useEffect(() => {
        // console.log('userinfo', userInfo);
        getActicle()
    }, [])

    const navigate = useNavigate()

    /* ---------------------------------- 点击头像 ---------------------------------- */
    const [userFlag, setUserFlag] = useState(false)  // 用户信息弹出层显示
    const popAction = () => {
        setUserFlag(true)
    }

    /* ---------------------------------- 获取文章 ---------------------------------- */
    const [articleList, setArticleList] = useState([])
    const [typeId, setTypeId] = useState(0) //文章分类id
    const [page, setPage] = useState(1)  //文章当前页
    const getActicle = async (type_id = 0) => {
        let res = await getArticleAPI(type_id, page)
        if (res.code === 200) {
            setArticleList(res.data)

        }
    }

    /* --------------------------------- 切换文章分类 --------------------------------- */
    const [typeList, setTypeList] = useState([
        { key: 0, title: '全部' },
        { key: 1, title: '球鞋测评' },
        { key: 2, title: '潮流穿搭' },
        { key: 3, title: '实战利器' },
        { key: 4, title: '休闲慢跑' },
        { key: 5, title: '好物分享' },
        { key: 6, title: '专业竞速' },
        { key: 7, title: '谍照首发' },
        { key: 8, title: '运动装备' },
    ])
    const tabChangeAction = (key) => {
        getActicle(key)
    }


    /* --------------------------------- 点击进入详情页 -------------------------------- */
    const toDetailAction = (id) => () => {
        console.log('id', id);
        navigate('/detail')
    }



    return (
        <div className={h.home}>
            <div className={h.header}>
                <div className={h.headerIcon}>
                    <Space style={{ fontSize: 20 }}>
                        <AppstoreOutline />
                    </Space>
                </div>
                <div className={h.headerAvatar} onClick={popAction}>
                    <img src={isLogin ? userInfo.user_avatar : "http://localhost:8080/images/avatar/default_avatar.png"} alt="" />
                </div>
            </div>
            <div style={{ width: '100%', height: '40px' }}></div>
            <div className={h.main}>
                <div className={h.mainTop}>
                    <div className={h.topDesc}>
                        <div className={h.descTitle}>SHOESDOG</div>
                        <div>love and share</div>
                    </div>
                    <div className={h.topSearch}>
                        <SearchBar
                            placeholder='请输入内容'
                            style={{
                                '--border-radius': '100px',
                                '--background': '#ffffff',
                                '--height': '32px',
                                '--padding-left': '12px',
                            }}
                        />
                    </div>
                </div>
                <div className={h.mainBottom}>
                    <Tabs onChange={tabChangeAction} defaultActiveKey='0' style={{ '--active-title-color': '#ffffff', '--active-line-color': '#ffffff' }}>
                        {
                            typeList.map(item => {
                                return (
                                    <Tabs.Tab title={item.title} key={item.key}></Tabs.Tab>
                                )
                            })
                        }
                    </Tabs>
                </div>
            </div>
            <div className={h.article}>
                <div className={h.articleTitle}>Popular Article</div>
                <div className={h.articleList}>
                    {
                        articleList.map(item => {
                            return (
                                <div className={h.articleItem} key={item.article_id} onClick={toDetailAction(item.article_id)}>
                                    <div className={h.itemImg}>
                                        <img src={item.article_coverimg || "http://localhost:8080/images/avatar/default_avatar.png"} alt="" />
                                    </div>
                                    <div className={h.itemContent}>
                                        <div className={h.contentTitle}>{item.article_title || ''}</div>
                                        <div className={h.contentDesc}>{item.article_introduction || ''}</div>
                                        <div className={h.contentLike}>
                                            <div className={h.author}>{item.user_name || ''}</div>
                                            <div className={h.like}>
                                                <LikeOutline /><span>{item.article_like || 0}</span>
                                            </div>
                                            <div className={h.like}>
                                                <StarOutline /><span>{item.article_collect || 0}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }

                </div>
            </div>

            {/*用户信息弹出层  */}
            <Popup
                visible={userFlag}
                onMaskClick={() => {
                    setUserFlag(false)
                }}
                onClose={() => {
                    setUserFlag(false)
                }}
                position='right'
                bodyStyle={{ width: '70vw' }}
            >
                <div className={h.user}>
                    <div className={h.userTitle}>用户信息</div>
                    <div className={h.userCard}>
                        <div className={h.cardAvatar}>
                            <img src={isLogin ? userInfo.user_avatar : "http://localhost:8080/images/avatar/default_avatar.png"} alt="" />
                        </div>
                        <div className={h.cardInfo}>
                            <div className={h.infoName}>{isLogin ? userInfo.user_name : "未登录"}</div>
                            <div className={h.infoemail}>{isLogin ? userInfo.user_email : ""}</div>
                            <div className={h.infoTwo}>
                                <div>正在关注：0</div>
                                <div>我的粉丝：0</div>
                            </div>
                        </div>
                    </div>
                    <div className={h.userDesc}>
                        <div>{isLogin ? userInfo.user_introduction : "请先登录"}</div>
                    </div>
                    <div className={h.userOptions}>
                        <div className={h.option}><LikeOutline /> 我的点赞</div>
                        <div className={h.option}><StarOutline /> 我的收藏</div>
                        <div className={h.option}><SmileOutline /> 个人中心</div>
                        <div className={h.option}><CloseOutline /> 退出登录</div>
                    </div>
                </div>
            </Popup>

            {/*设置弹出层  */}
        </div>
    );
}

export default Home;